<template>
  <div class="colonel">
    <div class="colonel-left">
      <div class="today-data">
        <div v-for="item in todayList" :key="item.id" :class="['today-item', trendParam.type == item.id && 'active']" @click="changeItem(item.id)">
          <div class="today-item-left">
            <span>{{ item.name }}</span>
          </div>
          <div>{{ item.hasMoney ? formatPriceCent(item.num) : item.num }}</div>
        </div>
      </div>
    </div>
    <div v-loading="trendLoading" class="colonel-right">
      <div class="top-time">
        <div>{{ title }}</div>
        <div>
          <el-date-picker
            v-model="trendDateRange"
            style="width: 300px; margin-bottom: 20px"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :shortcuts="rangeShortcuts"
            @change="timeChange"
          />
        </div>
      </div>
      <div class="overview">
        <div>
          {{ trendParamMap[trendParam.type].totalLabel }}
          <span>{{ currentItem?.hasMoney ? formatPriceCent(statistics.total) : statistics.total }}</span>
        </div>
        <div>
          {{ trendParamMap[trendParam.type].maxLabel }}<span>{{ currentItem?.hasMoney ? formatPriceCent(statistics.max) : statistics.max }}</span>
        </div>
        <div>
          {{ trendParamMap[trendParam.type].minLabel }} <span>{{ currentItem?.hasMoney ? formatPriceCent(statistics.min) : statistics.min }}</span>
        </div>
      </div>

      <div class="chart">
        <KLineChart
          width="100%"
          height="300px"
          x-type="date"
          y-type="number"
          :x-data="xData"
          :y-data="yData"
          :tooltip="tooltip"
          :options="option"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue';
import dayjs from 'dayjs';
import { KLineChart } from '@/components/k-charts';
import { getOrderSummary, getOrderDaysummary } from '@/api/crm-kgj/order';
import { formatPriceCent, toolGetDataPageRangeShortCuts as rangeShortcuts, toolGetCountInitDateRange } from '@/utils';
import lecturerUser1 from '@images/kgj/data-statistics/lecturer-user1.svg';
import lecturerRmb from '@images/kgj/data-statistics/lecturer-rmb.svg';
import lecturerFile from '@images/kgj/data-statistics/lecturer-file.svg';
import lecturerChart from '@images/kgj/data-statistics/lecturer-chart.svg';
defineOptions({
  name: 'KgjGoldDiggingSecondColonel'
});
const { initDate, initDtArr } = toolGetCountInitDateRange();

const todayList = computed(() => {
  return [
    {
      id: 1,
      name: '今日成交',
      num: core.value.pay_goods_amount,
      hasMoney: true,
      icon: lecturerRmb
    },
    {
      id: 2,
      name: '今日订单',
      num: core.value.order_num,
      icon: lecturerFile
    },
    {
      id: 3,
      name: '今日达人数',
      num: core.value.kol_num,
      icon: lecturerUser1
    },
    {
      id: 4,
      name: '今日预估佣金',
      num: core.value.estimated_commission,
      hasMoney: true,
      icon: lecturerChart
    },
    {
      id: 5,
      name: '今日实际佣金',
      num: core.value.real_commission,
      hasMoney: true,
      icon: lecturerChart
    },
    {
      id: 6,
      name: '今日出单商品数',
      num: core.value.goods_num,
      icon: lecturerChart
    },
    {
      id: 7,
      name: '今日新入库商品数',
      num: core.value.inc_goods_num,
      icon: lecturerChart
    },
    {
      id: 8,
      name: '今日一级团商品数',
      num: core.value.first_goods_num,
      icon: lecturerChart
    },
    {
      id: 9,
      name: '今日二级团商品数',
      num: core.value.second_goods_num,
      icon: lecturerChart
    },
    {
      id: 10,
      name: '今日智趣接口',
      num: core.value.ytt_goods_num,
      icon: lecturerChart
    }
  ];
});

const trendParamMap: any = {
  1: {
    totalLabel: '所选区间用户成交总数',
    maxLabel: '单日最高成交值',
    minLabel: '单日最低成交值'
  },
  2: {
    totalLabel: '所选区间订单总数',
    maxLabel: '单日最高订单数',
    minLabel: '单日最低订单数'
  },
  3: {
    totalLabel: '所选区间达人总数',
    maxLabel: '单日最高达人数',
    minLabel: '单日最低达人数'
  },
  4: {
    totalLabel: '所选区间预估佣金',
    maxLabel: '单日最高预估佣金',
    minLabel: '单日最低预估佣金'
  },
  5: {
    totalLabel: '所选区间实际佣金',
    maxLabel: '单日最高实际佣金',
    minLabel: '单日最低实际佣金'
  },
  6: {
    totalLabel: '所选区间出单商品总数',
    maxLabel: '单日最高出单商品数',
    minLabel: '单日最低出单商品数'
  },
  7: {
    totalLabel: '所选区间新入库商品总数',
    maxLabel: '单日最高新入库商品数',
    minLabel: '单日最低新入库商品数'
  },
  8: {
    totalLabel: '所选区间一级团商品总数',
    maxLabel: '单日最高一级团商品数',
    minLabel: '单日最低一级团商品数'
  },
  9: {
    totalLabel: '所选区间二级团商品总数',
    maxLabel: '单日最高二级团商品数',
    minLabel: '单日最低二级团商品数'
  },
  10: {
    totalLabel: '所选区间智趣接口商品总数',
    maxLabel: '单日最高智趣接口商品数',
    minLabel: '单日最低智趣接口商品数'
  }
};
const titleMaps: any = {
  1: '成交趋势',
  2: '订单趋势',
  3: '达人数趋势',
  4: '预估佣金趋势',
  5: '实际佣金趋势',
  6: '出单商品数趋势',
  7: '新入库商品数趋势',
  8: '一级团商品数趋势',
  9: '二级团商品数趋势',
  10: '智趣接口商品数趋势'
};
const indicatorMaps: any = {
  1: 'pay_goods_amount',
  2: 'order_num',
  3: 'kol_num',
  4: 'estimated_commission',
  5: 'real_commission',
  6: 'goods_num',
  7: 'inc_goods_num',
  8: 'first_goods_num',
  9: 'second_goods_num',
  10: 'ytt_goods_num'
};
const title = ref(titleMaps[1]);
const changeItem = (val: number) => {
  if (trendParam.value.type === val) return;
  trendParam.value.type = val;
  title.value = titleMaps[val];
  getTrend();
};
const timeChange = (val: any[]) => {
  const { start_time, end_time, range } = timeDeal(val);
  trendDateRange.value = range;
  trendParam.value.start_time = start_time;
  trendParam.value.end_time = end_time;
  getTrend();
};

const start = '00:00:00';
const end = '23:59:59';
const timeDeal = (val: any[]) => {
  let res = {
    start_time: dayjs(dayjs(initDtArr[0]).format('YYYY-MM-DD') + start)
      .unix()
      .valueOf(),
    end_time: dayjs(dayjs(initDtArr[1]).format('YYYY-MM-DD') + end)
      .unix()
      .valueOf(),
    range: [] as any[]
  };
  if (val && val.length) {
    const start_time = dayjs(dayjs(val[0]).format('YYYY-MM-DD') + start)
      .unix()
      .valueOf();
    const end_time = dayjs(dayjs(val[1]).format('YYYY-MM-DD') + end)
      .unix()
      .valueOf();
    const from = dayjs(val[0]).format('YYYYMMDD');
    const to = dayjs(val[1]).format('YYYYMMDD');
    res = {
      start_time,
      end_time,
      range: [from, to]
    };
  }
  return res;
};

const option = {
  showMarkLine: true
};
const tooltipMap: any = {
  1: '成交金额',
  2: '订单数',
  3: '达人数',
  4: '预估佣金',
  5: '实际佣金',
  6: '出单商品数',
  7: '新入库商品数',
  8: '一级团商品数',
  9: '二级团商品数',
  10: '智趣接口商品数'
};
const tooltip = (params: any) => {
  // 图例数据
  let itemStr = '';
  params.forEach((item: any) => {
    itemStr += `
    <div style="width:100%;margin-bottom:10px;color: #fff;">${dayjs.unix(item.axisValue).format('MM-DD')}</div>
    <div class="row">
      <div class="sample" style="background: ${item.color}"></div>
      <div class="name">${tooltipMap[trendParam.value.type]}：</div>
                <div class="value">
                  <div class="value-inner">
                    <span class="number">${toolNumFormat(item.value)}</span>
                  </div>
                </div>
          </div>`;
  });
  const str = `<div class="chart-tooltip line">
    ${itemStr}
  </div>`;
  return str;
};
// 获取数据
const trendParam = ref({
  type: 1, // 类型1-成交金额 2-订单数 3-达人数 4-预估佣金 5-实际佣金
  start_time: dayjs(dayjs(initDtArr[0]).format('YYYY-MM-DD') + start)
    .unix()
    .valueOf(),
  end_time: dayjs(dayjs(initDtArr[1]).format('YYYY-MM-DD') + end)
    .unix()
    .valueOf()
});

const currentItem = computed(() => {
  return todayList.value.find((o: any) => o.id === trendParam.value.type);
});
const trendDateRange = ref<any[]>(initDate);
const core = ref<any>({});
const getCore = async () => {
  const res = await getOrderSummary({
    start_time: dayjs(dayjs().format('YYYYMMDD') + start)
      .unix()
      .valueOf(),
    end_time: dayjs().unix().valueOf()
  });
  const data = res.data;
  core.value = data;
};
const statistics = reactive({
  min: 0,
  max: 0,
  total: 0
});
const xData = ref<any[]>([]);
const yData = ref<any[]>([]);
const toolNumFormat = (val: number) => {
  if ([1, 4, 5].includes(trendParam.value.type)) return `￥${val}`;
  return val;
};
const trendLoading = ref(false);
const totalTrend = ref([]);
const getTrend = async () => {
  trendLoading.value = true;
  statistics.min = 0;
  statistics.max = 0;
  statistics.total = 0;
  let chartData: any[] = [];
  xData.value = [];
  yData.value = [];
  const res: Record<string, any> = await getOrderDaysummary(trendParam.value);
  trendLoading.value = false;
  const { data, min, max, total } = res.data;
  statistics.min = min;
  statistics.max = max;
  statistics.total = total;
  totalTrend.value = data;
  if ([1, 4, 5].includes(trendParam.value.type)) {
    data.forEach((item: any) => {
      chartData.push(item[indicatorMaps[trendParam.value.type]] / 100);
      xData.value.push(item.ts);
    });
  } else {
    data.forEach((item: any) => {
      chartData.push(item[indicatorMaps[trendParam.value.type]]);
      xData.value.push(item.ts);
    });
  }
  yData.value = [
    {
      name: '趋势图',
      color: '#307AF2',
      data: chartData
    }
  ];
};

const init = () => {
  getCore();
  getTrend();
};
init();
</script>

<style lang="scss" scoped>
.colonel {
  display: flex;
  margin: 16px 0;

  .colonel-left {
    min-width: 288px;
    max-width: 288px;
    margin-right: 10px;
    background: #fff;

    .today-data {
      padding: 20px 24px;
      font-size: 14px;
      font-weight: 500;
      line-height: 22px;
      color: #4e5969;

      .today-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        margin-bottom: 14px;
        cursor: pointer;
        background: #f7f8fa;
        border-radius: 2px 0 0 2px;

        .today-item-left {
          display: flex;
          align-items: center;
        }

        .circle {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 20px;
          height: 20px;
          margin-right: 8px;
          background: #c9cdd4;
          border-radius: 50%;

          .icon {
            color: #fff;
          }

          .icon2 {
            transform: rotate(90deg);
          }
        }

        .svg-icon {
          display: block;
          flex-shrink: 0;
          padding: 4px;
          overflow: hidden;
          background-color: #c9cdd4;
          border-radius: 50%;

          img {
            display: block;
            width: 20px;
            height: 20px;
            filter: drop-shadow(#fff -200px 0);
            transform: translateX(200px);
          }
        }

        &.active {
          color: #fff;
          background: #307af2;

          .svg-icon {
            background-color: #fff;

            img {
              filter: drop-shadow(#307af2 -200px 0);
            }
          }

          .circle {
            background: #fff;

            .icon {
              color: #307af2;
            }
          }
        }
      }
    }
  }

  .colonel-right {
    flex: 1;
    padding: 24px;
    background: #fff;

    .top-time {
      display: flex;
      justify-content: space-between;
      font-size: 18px;
      font-weight: 500;
      line-height: 22px;
      color: #4e5969;
    }

    .overview {
      display: flex;
      align-items: center;
      padding-left: 24px;
      font-size: 12px;
      line-height: 42px;
      color: #86909c;
      background: #e8f3ff;
      border-radius: 4px;

      span {
        margin: 0 30px 0 6px;
        font-size: 16px;
        font-weight: 600;
        color: #4e5969;
      }
    }

    .chart {
      margin-top: 40px;
    }
  }
}
</style>
